<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div style="width: 100%;">
        <div class="top-part" v-loading="loading">

            <div class="left">
                <div>界面设计器</div>
                <div style="width: 1px;height: 16px;background-color: #cecece;margin: 0 10px;"></div>
                <el-link @click="weappUpdateHandle"><i class="el-icon-setting"></i> 设置</el-link>
            </div>
            <div class="btns">
                <el-button style="padding: 8px 10px;" size="mini" type="default" plain @click="downloadWeappSourceCode" :disabled="license_is_free">
                    <svg-icon icon-class="downloadweapp" />&nbsp;下载小程序源码
                </el-button>

                <el-button size="mini" type="default" plain @click="pagesExport" icon="el-icon-brush">导入 /
                    导出页面</el-button>
                <el-button size="mini" type="default" plain @click="resetHandle" icon="el-icon-refresh">重置</el-button>
                <el-button size="mini" type="default" plain icon="el-icon-search" @click="previewHandle">预览</el-button>
                <el-button size="mini" type="primary" icon="el-icon-check" @click="saveHandle">保存</el-button>
            </div>


        </div>
        <WeapPreview ref="qrpreview"></WeapPreview>
        <WeappUpdate ref="weappupdate"></WeappUpdate>
        <WeappCodeDownload ref="weappcodedownload"></WeappCodeDownload>
        <pagesImportExport ref="pagesimportexport"></pagesImportExport>
    </div>

</template>

<style scoped>
::-webkit-scrollbar {
    width: 0px;
}


.top-part {
    width: 100%;
    height: 57px;
    /* padding: 0 10px; */
    /* background: #fff; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* position: fixed; */
    /* top: 183px; */
    right: 0;
    z-index: 10;
    box-sizing: border-box;
}

.top-part .left {
    font-size: 14px;
    /* font-weight: bold; */
    /* color: #fff; */
    display: flex;
    align-items: center;
}

.top-part .btns {
    display: flex;
}
</style>

<script>
import Vue from "vue";

import WeapPreview from "./weappreview/index.vue"
import WeappUpdate from './weappupdate/index.vue'
import WeappCodeDownload from './weappCodeDownload/index.vue'
import pagesImportExport from './pagesImportExport/index.vue'
import { updatePage, exportPage } from "@/api/page";
import { updateTabbar, deleteTabbar, createTabbar } from "@/api/tabbar.js";


export default {
    name: "pagemaker",
    props: {
        btns: {
            type: Object,
            default: null,
        },
    },
    components: {
        WeapPreview,
        WeappUpdate,
        WeappCodeDownload,
        pagesImportExport
    },
    data() {
        return {
            loading: false,
        };
    },

    mounted() {
    },

    computed: {
        config: function () {
            return this.$store.state.myconfig;
        },
        license_is_free() {
          return false;
        },
    },

    methods: {
        saveHandle: function () {
            var pagemaker = this.$store.state.pagemaker;
            var page = {
                id: pagemaker.pageId,
                version: pagemaker.version,
                config: pagemaker.pageConfig,
                modules: pagemaker.pageModules,
                rules: pagemaker.pageRules
            };
            this.$store.commit("pagemaker/setLoading", true);
            this.loading = true;
            var _this = this;
            console.log("update page", page);
            updatePage(page, "update").then((res) => {
                this.loading = false;
                this.$store.commit("pagemaker/setLoading", false);
                if (res.status != 0) {
                    return;
                }
                this.$store.dispatch("pagemaker/loadPage", pagemaker.pageId);
                this.$message.success("保存成功");
            });
            var tabbar = this.$store.state.pagemaker.pageTabbar
            if (tabbar.id) {
                updateTabbar(tabbar).then((res) => {
                    // this.loading = false;
                    if (res.status != 0) {
                        return;
                    }
                    // this.$message.success("已保存");
                    // this.$emit("change");
                    // this.show = false
                });
            }

        },

        resetHandle: function () {
            // load page info
            var pagemaker = this.$store.state.pagemaker;
            this.$store.dispatch("pagemaker/loadPage", pagemaker.pageId);
        },

        previewHandle() {
            this.$refs.qrpreview.showQr()
        },
        weappUpdateHandle() {
            this.$refs.weappupdate.showdialog()
        },
        downloadWeappSourceCode: function () {
            this.$refs.weappcodedownload.showdialog()
        },
        pagesExport: function () {
            this.$refs.pagesimportexport.showdialog()
        }

    },
};
</script>
